{include file="public/head"/}
<div class="container-fluid" id="main">
    <div class="row clearfix">
        <div class="col-md-12 column">
            <div class="alert alert-dismissable alert-info">
                <button type="button" class="close">×</button>
                <p></p>
            </div>
        </div>
    </div>


    <div class="ntDesktop">
        <div class="ntDesktop-head">{:lang('batch_adjustment_custmers_information')}</div>

        <div class="row clearfix" style="padding-top:0px">
            <div class="col-md-12 text-right">
                <div>
                    <a href="javascript:;" @click="gobanck" class="btn btn-default"><span
                            class="glyphicon glyphicon-chevron-left"></span>{:lang('back_to_list')}</a>
                    <a href="#" class="btn btn-primary" style="padding-left:48px;padding-right:48px;" @click="save">
                        <span class="glyphicon glyphicon-floppy-disk"></span> {:lang('save')} </a>
                </div>
            </div>
        </div>

        <div class="row clearfix">
            <div class="col-md-12 column">
                <table class="table table-striped table-hover ntTable" v-cloak>
                    <thead>
                    <tr>
                        <th style="text-align:center"><input type="checkbox" ref="checkitem" @click="allsel"/></th>
                        <td>{:lang('serial_number')}</td>
                        <td>{:lang('company_name')}</td>
                        <td width="40%">
                            <div class="col-md-3">
                                <select class="form-control col-md-2" v-model="data.country_id"
                                        @change="selchangefun('provinces',data.country_id)">
                                    <option value="">{:lang('please_select')}</option>
                                    <option :value="item.id" v-for="(item,index) in countryname">{{item.name}}</option>
                                </select>
                            </div>

                            <div class="col-md-3">
                                <select class="form-control" v-model="data.province_id"
                                        @change="selchangefun('city',data.province_id)">
                                    <option value="">{:lang('please_select')}</option>
                                    <option :value="item.id" v-for="(item,index) in provinces">{{item.name}}</option>
                                </select>
                            </div>

                            <div class="col-md-3">
                                <select class="form-control" v-model="data.city_id"
                                        @change="selchangefun('town',data.city_id)">
                                    <option value="">{:lang('please_select')}</option>
                                    <option :value="item.id" v-for="(item,index) in city">{{item.name}}</option>
                                </select>
                            </div>

                            <div class="col-md-3">
                                <select class="form-control" v-model="data.town_id">
                                    <option value="">{:lang('please_select')}</option>
                                    <option :value="item.id" v-for="(item,index) in town">{{item.name}}</option>
                                </select>
                            </div>
                        </td>
                        <td>
                            <select class="form-control" v-model="data.works">
                                <option value="">{:lang('number_of_employees')}</option>
                                <option :value="index" v-for="(item,index,key) in works">{{item}}</option>
                            </select>
                        </td>
                        <td>
                            <select class="form-control" v-model="data.saler_id">
                                <option value="">{:lang('seller_assignation')}</option>
                                <option :value="item.id" v-for="(item,index) in managename">{{item.nickname}}</option>
                            </select>
                        </td>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="(item,index) in list" :key="item.id">
                        <td align='center'><input type="checkbox" @click="onesel(item.id)"/></td>
                        <td>{{item.id}}</td>
                        <td>
                            <small>{{item.cotypename}}</small>
                            <br/><a href="detail.html">{{item.name}}</a></td>
                        <td>
                            <small>{{item.address}}</small>
                            <br/>{{item.addr}}
                        </td>
                        <td align='center'>{{item.works}}</td>
                        <td>{{item.managename}}</td>
                    </tr>
                    </tbody>
                </table>
                <nav aria-label="Page navigation" class="navbox">
                    <ul class="pagination"></ul>
                </nav>
            </div>
        </div>
    </div>
</div>
<script>
    new Vue({
        el: '#main',
        data: () => ({
            countryname: [],
            provinces: [],//省份
            city: [],//城市
            town: [],//镇
            list: [],
            managename: [],
            works: [],
            page: 1,
            tijiao:true,
            batch: [],
            allid: [],
            data: {
                country_id: '',//国家选择的值
                province_id: '',//省份选择的值
                city_id: '',//城市选择的值
                town_id: '',//乡镇选择的值
                works: '',
                saler_id: '',
                act: 'batchadd',
                ids: ''
            }
        }),
        methods: {
            getdata(){
                this.batch = []
                $.ajax({
                    url: '/admin/customer/batchcompany',
                    type: 'post',
                    data: {
                        ids: window.localStorage.getItem('batch'),
                        getbatch: '',
                        page: this.page,
                        pageSize: 2
                    },
                    success: (data) => {
                        this.$refs.checkitem.checked = false
                        data = JSON.parse(data)
                        this.list = data.getcompany.data
                        this.countryname = data.getcompany.countrys
                        this.works = data.getcompany.works
                        this.managename = data.getcompany.managename
                        //this.data.ids = data.getcompany.ids.join(',')
                        this.allid = data.getcompany.ids
                        this.setPage(this.page, Math.ceil(data.getcompany.count / 2))
                    }
                })
            },
            //获取对应的地区的值
            selchangefun(type, val){
                $.ajax({
                    url: '/admin/api/getprovinces',
                    type: 'post',
                    data: {
                        tables: type,
                        id: val
                    },
                    success: (data) => {
                        data = JSON.parse(data)
                        switch (type) {
                            case 'countryname':
                                this.countryname = data
                                break;
                            case 'provinces':
                                this.provinces = data
                                this.city = []
                                this.town = []
                                this.data.province_id = ''
                                this.data.city_id = ''
                                this.data.town_id = ''
                                break;
                            case 'city':
                                this.city = data
                                this.town = []
                                this.data.city_id = ''
                                this.data.town_id = ''
                                break;
                            case 'town':
                                this.town = data
                                this.data.town_id = ''
                                break;
                        }
                    }
                })

            },
            save(){
                if (this.tijiao){
                    $.ajax({
                        url: '/admin/customer/batchcompany',
                        data: this.data,
                        type: 'post',
                        success: (data) => {
                            data = JSON.parse(data)
                            change_mes_type('.alert',data.status)
                            if (data.status != 1) {
                                $('.alert').show()
                                $('.alert p').html('*' + data.msg + '<br>')
                                //toastr.warning(res.msg);
                            }
                            else {
                                this.tijiao=false
                                $('.alert').show()
                                $('.alert p').html('*' + data.msg + '<br>')
                                this.getdata()
                            }
                        }
                    })
                }

            },
            setPage(pageCurrent, pageSum, callback) {
                if (pageSum > 1) {
                    $('.navbox').css('display', 'block')
                    $(".pagination").bootstrapPaginator({
                        //设置版本号
                        bootstrapMajorVersion: 3,

                        // 显示第几页
                        currentPage: pageCurrent,
                        // 总页数
                        totalPages: pageSum,
                        //当单击操作按钮的时候, 执行该函数, 调用ajax渲染页面
                        onPageClicked: (event, originalEvent, type, page) => {
                            // 把当前点击的页码赋值给currentPage, 调用ajax,渲染页面
                            currentPage = page
                            callback && callback()
                            this.page = page
                            this.getdata()
                        }
                    })
                } else {
                    $('.navbox').css('display', 'none')
                }
            },
            allsel(event){
                if ($(event.target).prop('checked')) {
                    $(event.target).parents('table').find('input').prop('checked', true)
                    this.batch = this.allid
                } else {
                    $(event.target).parents('table').find('input').prop('checked', false)
                    this.batch = []
                }
                this.data.ids = this.batch.join(',')
            },
            onesel(did){
                if (this.batch.indexOf(did) == -1) {
                    this.batch.push(did)
                } else {
                    this.batch.splice(this.batch.indexOf(did), 1)
                }
                this.data.ids = this.batch.join(',')
                var isall = true
                $('td input').each(function () {
                    if (!$(this).prop('checked')) {
                        isall = false
                    }
                })
                $('th input').prop('checked', isall)
            },
            gobanck(){
                location.href="/admin/customer/customercompany"
            }
        },
        mounted(){
            this.getdata()
        }
    })
</script>
{include file="public/foot"/}